<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户登录</title>

  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul,h1 {
      list-style: none;
      margin: 0;
      padding: 0;
    }


    section {

      width: 1200px;
      margin: 0 auto;
      margin-top: 30px;
    }

    section h3 {
      width: 1200px;
      margin: 50px auto;
      text-align: center;
      color: #3f3f3f;
    }

    #form {
      width: 500px;
      height: 350px;
      background: #ffffff;
      overflow: hidden;
      margin: 0 auto;
      border-radius: 20px;
    }

    .userin {
      width: 400px;
      color: #868686;
      margin: 50px auto;
      font-size: 18px;
    }

    .passin {
      position: relative;
      width: 400px;
      color: #868686;
      margin: 30px auto;
      font-size: 18px;
    }

    .userin input,
    .passin input {
      outline: none;
      padding: 0 3px;
      border: none;
      border-radius: 8px;
      background: rgba(0, 0, 0, 0.05);
      font-size: 20px;
      width: 255px;
      height: 48px;
      line-height: 48px;
    }

    #btn {
      width: 400px;
      height: 50px;
      background-color: #CA141D;
      outline: none;
      border: none;
      border-radius: 10px;
      font-size: 20px;
      color: #fff;
      margin: 10px auto;
      display: block;
      margin-top: 20px;
    }

    #btn:hover {
      opacity: 0.8;
      cursor: pointer;

    }

    .junerror {
      color: red;
      font-size: 14px;
    }

    .logo {
      font-size: 170px;
      color: #e6e6e6;
      font-weight: 800;
      letter-spacing: -10px;
      margin-bottom: 0px;
      text-align: center;
    }
  </style>



</head>

<body>


  <section>
    
    <h3>{{msg}}</h3>
    <h1 class="logo">HM</h1>
    <div id="form">
      <form id="login">

        <p class="userin">

          <label>请输入用户名：</label>
          <input type="text" name="username" id="userhaid" placeholder="手机号/邮件地址/账户名">

        </p>
        <p class="passin">
          <label>请输入密码：</label>

          <input type="password" name="password" id="passhaid" placeholder="密码">
        </p>


        <div>
          <button type="submit" id='btn'>登录</button>
        </div>
      </form>
    </div>

  </section>




  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
  <script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
  <script>



    $('#btn').click(function () {


      $.post('./login', $('#login').serialize(), null, 'json').then(res => {
        
        //  console.log(res.msg)
        if (res.code == "200") {
          alert(res.msg)
          window.location.href = "http://localhost:3000/admin/index"
        }else{
          alert(res.msg)
        }

      })

      return false  //取消默认设置
    })



    $("#login").validate({
      // 规则
      rules: {
        // key:表单域中的name名称
        username: {
          // 规则
          required: true,
          minlength: 2,
          maxlength: 5

        },
        password: {
          // 规则
          required: true,
          minlength: 6,
          maxlength: 10

        }


      },
      // 验证失败后消息提示
      messages: {
        username: {
          required: '账号或密码不能为空',
          minlength: '长度不能少于2位',
          maxlength: '长度不能多于5位'
        },
        password: {
          required: '账号或密码不能为空',
          minlength: '长度不能少于6位',
          maxlength: '长度不能多于10位'
        }

      },

      // 验证失败后元素样式
      errorClass: 'junerror',
      // 验证通过后回调方法

    })



























    // let userdom = document.querySelector("input[name='username']")
    // let passdom = document.querySelector("input[name='password']")
    // function dopost() {
    //   let username = userdom.value.trim();
    //   let password = passdom.value.trim();

      // if (username != '' && password != '') {
      //   // 提交
      //   document.querySelector('button').disabled = true;
      //   return true;
      // }
    //   if (username == '') userdom.nextSibling.nextSibling.innerHTML = '账号不能为空'
    //   if (password == '') passdom.nextSibling.nextSibling.innerHTML = '密码不能为空'

    //   return false;
    // }
  </script>
</body>

</html>